<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="renderer" content="webkit" />

	<title>数据管理平台 - 主页</title>


	<link rel="shortcut icon" href="static/favicon.ico" />
	<link href="system/css/bootstrap.min.css?v=3.3.6" rel="stylesheet" />
	<link href="system/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" />
	<link href="/system/css/animate.css" rel="stylesheet" />
	<link href="/system/css/style.css?v=4.1.0" rel="stylesheet" />
</head>

<body class="fixed-sidebar full-height-layout gray-bg"
	  style="overflow:hidden">






<div id="wrapper">
	<!--左侧导航开始-->
	<nav class="navbar-default navbar-static-side" role="navigation">
		<div class="nav-close">
			<i class="fa fa-times-circle"></i>
		</div>
		<div class="sidebar-collapse">
			<ul class="nav" id="side-menu">
				<li class="nav-header">
					<div class="dropdown profile-element">
							<span><img alt="image" class="img-circle"
									   th:src="@{'system/img/' + 'admin' +'.jpg' }" /></span> <a
							data-toggle="dropdown" class="dropdown-toggle" href="#"> <span
							class="clear"> <span class="block m-t-xs"><strong
							class="font-bold" th:text="${username}">Beaut-zihan</strong></span>
							</span>
					</a>
						<ul class="dropdown-menu animated fadeInRight m-t-xs">
							<li><a th:href="@{/setpassword}">修改密码</a></li>


							<li class="divider"></li>
							<li><a th:href="@{/logout}">安全退出</a></li>
						</ul>
					</div>
					<div class="logo-element">Lin</div>
				</li>
				<!--<li><a class="J_menuItem" th:href="@{/welcome}"><i-->
						<!--class="fa fa-home"></i> <span class="nav-label">主页</span></a></li>-->
				<!--  				<li><a class="J_menuItem" th:href="@{/userpage}"><i
                                        class="fa fa-columns"></i> <span class="nav-label">用户管理</span></a></li>
                                <li><a class="J_menuItem" th:href="@{/deptpage}"><i
                                        class="fa fa-clone"></i> <span class="nav-label">部门管理</span></a></li>

                                <li><a class="J_menuItem" th:href="@{/noticepage}"><i
                                        class="fa fa-share"></i> <span class="nav-label">发送通知</span></a></li>

                                <li><a> <i class="fa fa-tags"></i> <span
                                        class="nav-label">日志管理</span> <span class="fa arrow"></span>
                                </a>
                                    <ul class="nav nav-second-level">
                                        <li><a class="J_menuItem" th:href="@{/loginlogpage}">登陆日志</a></li>

                                        <li><a class="J_menuItem" th:href="@{/operationlogpage}">操作日志</a>
                                        </li>
                                    </ul></li>

                                <li><a class="J_menuItem" th:href="@{/memopage}"> <i
                                        class="fa fa-sticky-note"></i> <span class="nav-label">我的便签</span>
                                </a></li>
            -->
				<!--<li th:each="menu:${menulist}" >-->
					<!--<a class="J_menuItem" th:href="${menu.url}">-->
						<!--<i class="fa" th:attrappend="class=${' ' + menu.icon}"></i> <span-->
							<!--class="nav-label" th:text="${menu.name}">我的便签</span>-->
					<!--</a>-->
				<!--</li>-->

				<!--<div class="container2">-->
					<!--<ul>-->
						<!--<li><span></span>系统管理</li>-->
						<!--<ul class="small hide">-->
							<!--<li th:each="menu:${menulist}" >-->
								<!--<a class="J_menuItem" th:href="${menu.url}" th:text="${menu.name}"/>-->
							<!--</li>-->
						<!--</ul>-->
					<!--</ul>-->
				<!--</div>-->
				<div class="list">
					<ul class="yiji">
						<div class="yiji_content">
							<div class="container2" th:each="user,userStat:${menuListmap}">
								<ul>
									<li th:text="${user.key}"><span class="down"></span></li>
									<ul class="small hide">
										<li th:each="menu:${user.value}" >
											<a class="J_menuItem" th:href="${menu.url}" th:text="${menu.name}"/>
										</li>
									</ul>
								</ul>
							</div>
						</div>
					</ul>
				</div>





				<!--<li><a class="J_menuItem" th:href="@{/introduction}"> <i-->
						<!--class="fa fa-bug"></i> <span class="nav-label">功能介绍</span>-->
				<!--</a></li>-->





			</ul>
		</div>
	</nav>
	<!--左侧导航结束-->
	<!--右侧部分开始-->
	<div id="page-wrapper" class="gray-bg dashbard-1">
		<div class="row border-bottom">
			<nav class="navbar navbar-static-top" role="navigation"
				 style="margin-bottom: 0">
				<div class="navbar-header">
					<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
					   href="#"><i class="fa fa-bars"></i> </a>

				</div>
				<ul class="nav navbar-top-links navbar-right">


					<li class="dropdown hidden-xs"><a
							class="right-sidebar-toggle" aria-expanded="false"> <i
							class="fa fa-tasks"></i> 菜单
					</a></li>
				</ul>
			</nav>
		</div>
		<div class="row content-tabs">
			<button class="roll-nav roll-left J_tabLeft">
				<i class="fa fa-backward"></i>
			</button>
			<nav class="page-tabs J_menuTabs">
				<div class="page-tabs-content">
					<a href="javascript:;" class="active J_menuTab"
					   data-id="index_v1.html">首页</a>
				</div>
			</nav>
			<button class="roll-nav roll-right J_tabRight">
				<i class="fa fa-forward"></i>
			</button>
			<div class="btn-group roll-nav roll-right">
				<button class="dropdown J_tabClose" data-toggle="dropdown">
					关闭操作<span class="caret"></span>

				</button>
				<ul role="menu" class="dropdown-menu dropdown-menu-right">
					<li class="J_tabShowActive"><a>定位当前选项卡</a></li>
					<li class="divider"></li>
					<li class="J_tabCloseAll"><a>关闭全部选项卡</a></li>
					<li class="J_tabCloseOther"><a>关闭其他选项卡</a></li>
				</ul>
			</div>
			<a id="logouta" class="roll-nav roll-right J_tabExit"
			   onclick="window.location='/logout'"><i
					class="fa fa fa-sign-out"></i> 退出</a>
		</div>
		<div class="row J_mainContent" id="content-main">
			<iframe class="J_iframe" name="iframe0" width="100%" height="100%"
					th:src="@{/welcome}" frameborder="0"></iframe>
		</div>
		<div class="footer"></div>
	</div>
	<!--右侧部分结束-->
	<!--右侧边栏开始-->
	<div id="right-sidebar">
		<div class="sidebar-container">

			<ul class="nav nav-tabs navs-2">

				<li class="active"><a data-toggle="tab" href="#tab-1"> <i
						class="fa fa-gear"></i> 主题
				</a></li>
				<li class=""><a data-toggle="tab" href="#tab-2"> 通知 </a></li>

			</ul>

			<div class="tab-content">
				<div id="tab-1" class="tab-pane active">
					<div class="sidebar-title">
						<h3>
							<i class="fa fa-comments-o"></i> 主题设置
						</h3>
						<small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式。</small>
					</div>
					<div class="skin-setttings">
						<div class="title">主题设置</div>
						<div class="setings-item">
							<span>收起左侧菜单</span>
							<div class="switch">
								<div class="onoffswitch">
									<input type="checkbox" name="collapsemenu"
										   class="onoffswitch-checkbox" id="collapsemenu" /> <label
										class="onoffswitch-label" for="collapsemenu"> <span
										class="onoffswitch-inner"></span> <span
										class="onoffswitch-switch"></span>
								</label>
								</div>
							</div>
						</div>
						<div class="setings-item">
							<span>固定顶部</span>

							<div class="switch">
								<div class="onoffswitch">
									<input type="checkbox" name="fixednavbar"
										   class="onoffswitch-checkbox" id="fixednavbar" /> <label
										class="onoffswitch-label" for="fixednavbar"> <span
										class="onoffswitch-inner"></span> <span
										class="onoffswitch-switch"></span>
								</label>
								</div>
							</div>
						</div>
						<div class="setings-item">
							<span> 固定宽度 </span>

							<div class="switch">
								<div class="onoffswitch">
									<input type="checkbox" name="boxedlayout"
										   class="onoffswitch-checkbox" id="boxedlayout" /> <label
										class="onoffswitch-label" for="boxedlayout"> <span
										class="onoffswitch-inner"></span> <span
										class="onoffswitch-switch"></span>
								</label>
								</div>
							</div>
						</div>
						<div class="title">皮肤选择</div>
						<div class="setings-item default-skin nb">
								<span class="skin-name "> <a href="#" class="s-skin-0">
										默认皮肤 </a>
								</span>
						</div>
						<div class="setings-item blue-skin nb">
								<span class="skin-name "> <a href="#" class="s-skin-1">
										蓝色主题 </a>
								</span>
						</div>
						<div class="setings-item yellow-skin nb">
								<span class="skin-name "> <a href="#" class="s-skin-3">
										黄色/紫色主题 </a>
								</span>
						</div>
					</div>
				</div>
				<div id="tab-2" class="tab-pane">

					<div class="sidebar-title">
						<h3>
							<i class="fa fa-comments-o"></i> 最新通知
						</h3>

					</div>

					<div>

						<div class="sidebar-message" th:each="notice:${noticelist}">
							<a href="#">
								<div class="pull-left text-center">
									<img alt="image" class="img-circle message-avatar"
										 th:src="@{'system/img/'+ ${notice.avatar}+ '.jpg'}" />
									<div class="m-t-xs" th:text="${notice.sendUsername}"></div>
								</div>
								<div class="media-body" th:utext="${notice.message}"></div>

							</a>
						</div>

					</div>

				</div>

			</div>

		</div>
	</div>
	<!--右侧边栏结束-->

</div>
<!-- 全局js -->
<script src="system/js/jquery.min.js?v=2.1.4"></script>
<!-- 全局js -->
<script src="system/js/jquery.min.js?v=2.1.4"></script>
<script src="/system/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/system/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/system/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/system/js/plugins/layer/layer.min.js"></script>

<script th:src="@{system/js/lin/index.js}"></script>

<!-- 自定义js -->
<script src="system/js/hplus.js?v=4.1.0"></script>

<!-- 第三方插件 -->
<script src="system/js/plugins/pace/pace.min.js"></script>
<style type="text/css">
	* {
		padding: 0px;
		margin: 0px;
		font-family: microsoft yahei;
	}
	.container2 {
		margin: 0px;
		border: 0px solid #000;
		width: 200px;
		overflow: hidden;
	}
	li {
		list-style: none;
	}
	.container2 li {
		background: #2f4050;
		width: 200pxpx;
		height: 40px;
		color: #a7b1c2;
		font-weight: 600;
		font-size: 15px;
		cursor: pointer;
		line-height: 2em;
	}
	.container2 li span {
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-left: 10px solid #000;
		border-bottom: 5px solid transparent;
		display: inline-block;
		margin: 0 10px;
	}
	.container2 li .down {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 10px solid #000;
	}
	.small li {
		background: #2f4050;
		border: 0px solid #2f4050;
		height: 30px;
		color: #23c6c8;
		font-weight: 600;
		font-size: 15px;
		padding-left: 30px;
	}
	.small li:hover {
		background: #2f4050;
	}
	.hide {
		display: none;
	}
	.container2 ul .color {
		background: #2f4050;
	}

</style>

<script th:inline="javascript">
	function create_menu_content() {
        var allMenuTrees = [[${allMenuTrees}]]
        var allMenuTreesJson =$.parseJSON(allMenuTrees);
        var menu_html = ''
        for (var i=0;i<allMenuTreesJson.length;i++) {
            //获取一级目录
            var first_level_menu = allMenuTreesJson[i]
            var first_level_menu_child =first_level_menu["childList"]

            //获取目录实体
            var first_level_menu_entity = $.parseJSON(first_level_menu["info"])
            var first_level_menu_name = first_level_menu_entity["name"]

            if (first_level_menu_child.length > 0) {
                menu_html += '<li><a class="inactive">'+first_level_menu_name+'</a>'
			} else {
                menu_html += '<li><a>'+first_level_menu_name+'</a>'
			}

//        alert(JSON.stringify(first_level_menu["info"]) + " name: " + first_level_menu_entity["name"] + " child size : " + first_level_menu_child.length)
            if (first_level_menu_child.length > 0) {
                menu_html+= '<ul style="display: none">'
                for (var j=0;j<first_level_menu_child.length;j++) {
                    //获取二级目录
                    var second_level_menu = first_level_menu_child[j]
                    var second_level_menu_child =second_level_menu["childList"]

                    //获取目录实体
                    var second_level_menu_entity = $.parseJSON(second_level_menu["info"])
                    var second_level_menu_name = second_level_menu_entity["name"]
                    var second_level_menu_url = second_level_menu_entity["url"]

                    menu_html += '<li>'
                    if (second_level_menu_child.length > 0) {
                        menu_html += '<a class="inactive active">'+second_level_menu_name+'</a>'
                    } else {
                        menu_html += '<a class="J_menuItem" href="'+second_level_menu_url+'">'+second_level_menu_name+'</a>'
                    }

//                alert(JSON.stringify(second_level_menu["info"]) + " name: " + second_level_menu_name + " child size : " + second_level_menu_child.length)
                    if (second_level_menu_child.length > 0) {
                        menu_html+= '<ul>'
                        for (var k=0;k<second_level_menu_child.length;k++) {
                            //获取三级目录
                            var third_level_menu = second_level_menu_child[k]
                            var third_level_menu_child =third_level_menu["childList"]

                            //获取目录实体
                            var third_level_menu_entity = $.parseJSON(third_level_menu["info"])
                            var third_level_menu_name = third_level_menu_entity["name"]
                            var third_level_menu_url = third_level_menu_entity["url"]

                            menu_html += '<li>'
                            menu_html += '<a class="J_menuItem"  href="'+third_level_menu_url+'">'+third_level_menu_name+'</a>'
                            menu_html += '</li>'
//                        alert(JSON.stringify(third_level_menu["info"]) + " name: " + third_level_menu_name +" child size : " + third_level_menu_child.length)
                        }

                        menu_html += '</ul>'
                    }

                    menu_html += '</li>'
                }

                menu_html+= '</ul>'
            }
            menu_html += '</li>'
        }

        $(".yiji_content").replaceWith(menu_html)
    }

//    window.onload = create_menu_content;

</script>

<style type="text/css">
	*{margin: 0;padding: 0}
	body{font-size: 12px;font-family: "宋体","微软雅黑";}
	ul,li{list-style: none;}
	a:link,a:visited{text-decoration: none;}
	.list {
		width: 200px;
		border: 0px solid #000;
		margin: 0px;
	}
	/* .list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;} */
	.list ul li{border-bottom:0;}
	.list ul li a{padding-left: 5px;color: #a7b1c2; font-size:15px; display: block; font-weight:bold;height:40px;line-height: 36px;position: relative;}
	.list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;}
	.list ul li .inactives{background:url(images/on.png) no-repeat 184px center;}
	.list ul li ul{display: none;}
	.list ul li ul li { border-left:0; border-right:0; border-color:#467ca2;}
	.list ul li ul li ul{display: none;}
	.list ul li ul li a{ padding-left:20px;color: #316a91;height: 30px;}
	.list ul li ul li ul li {  border-color:#6196bb; }
	.last{ background-color:#d6e6f1; border-color:#6196bb; }
	.list ul li ul li ul li a{ color:#0c88f3; padding-left:35px;}
</style>
<script type="text/javascript">
    $(document).ready(function() {

        create_menu_content();

		$('a.inactive').click(function(){
            var twoUl = $(this).siblings('ul');
            //判断当前其他的ul是否隐藏
            if(twoUl.is(":hidden")){
                //当前父级 的其他li，清除class
                $(this).parent('li').siblings('li').removeClass('inactives');
                //给当前的a标签添加clss
                $(this).addClass('inactives');
                //
                twoUl.slideDown(100).children('li');
                var threeUl = $(this).parents('li').siblings('li').children('ul');
                if(threeUl.is(":visible")){
                    threeUl.parent('li').children('a').removeClass('inactives');
                    threeUl.slideUp(100);
                }
            }else{
                //控制自身变成+号
                $(this).removeClass('inactives');
                //控制自身菜单下子菜单隐藏
                twoUl.slideUp(100);
                //控制自身子菜单变成+号
                twoUl.children('li').children('ul').parent('li').children('a').addClass('inactives');
                //控制自身菜单下子菜单隐藏
                twoUl.children('li').children('ul').slideUp(100);
                //控制同级菜单只保持一个是展开的（-号显示）
                twoUl.children('li').children('a').removeClass('inactives');
            }
        });

//        $(".nav-content>a").each(function () {
//            $(this).click(function () {
//                $(".content-right").html($(this).html());
//            });
//        });
    });
</script>


<script type="text/javascript" src="system/js/contabs.js"></script>
<!--<script src="-->
<!--http://libs.baidu.com/jquery/1.9.0/jquery.js"></script-->
<!--&gt;-->

<script type="text/javascript">

//    $(document).ready(function () {
//
//        $('.container2>ul>li').click(function () {
//
//            $(this).toggleClass('color');
//
//            $(this).find('span').toggleClass('down');
//
//            $(this).next().toggleClass('hide');
//
//        })
//    });

</script>

</body>

</html>
